<template>
	<div class="flex flex-col items-center">
		<div class="md:hidden flex flex-col items-center">
			<img
				v-if="getGameIamge"
				:src="getGameIamge"
				class="rounded-lg w-[108px] h-[144px] mb-[8px]"
				default="placeholder-higher.svg"
				type="network" />
			<base-image
				v-else
				class="rounded-lg w-[108px] h-[144px] mb-[8px]"
				default="placeholder-higher.svg" />
			<div class="text-t-1 text-center">{{ props.data?.gameName }}</div>
			<div class="text-t-4 text-center text-sm mb-[7px]">{{ props.data?.developerName }}</div>
		</div>

		<n-popover ref="popoverRef" trigger="click" placement="bottom-end" :show-arrow="false">
			<template #trigger>
				<div class="flex items-center mb-4">
					<div class="text-t-2 mr-4">{{ $t('slotsDetail.balance') }}</div>
					<div
						class="flex items-center h-10 bg-bg-3 rounded-lg p-2 app-bg-react"
						@click="show = !show">
						<base-currency class="mr-1" :currency="currency" />
						<div class="mr-3">{{ currency }}</div>
						<base-icon
							size="12"
							name="down"
							class="duration-300"
							:class="{
								'rotate-180': show
							}" />
					</div>
				</div>
			</template>
			<n-scrollbar class="w-[90px] max-h-[360px] rounded-sm">
				<div
					v-for="(item, index) in data?.supportedCurrencies"
					:key="index"
					class="flex items-center p-[10px] cursor-pointer hover:bg-bg-3"
					@click="handleCurrency(item)"
					:class="{
						'!bg-primary': item === currency
					}">
					<base-currency class="mr-1" :currency="item" />
					{{ item }}
				</div>
			</n-scrollbar>
		</n-popover>
		<div class="flex">
			<div
				class="rounded-lg app-bg-react bg-primary px-[33px] py-[7px] justify-center flex items-center mr-[10px] h-12 min-w-[146px]"
				@click="handleGame(false)">
				<base-icon
					size="20"
					:name="accountStore.isLogin ? 'dollar' : 'account2'"
					class="mr-1"></base-icon>
				{{ accountStore.isLogin ? $t('slotsDetail.realgame') : $t('account.register') }}
			</div>
			<div
				class="rounded-lg app-bg-react bg-bg-10 px-[33px] py-[7px] justify-center flex items-center h-12"
				@click="handleGame(true)">
				<base-icon size="20" name="game" class="mr-1"></base-icon>
				{{ $t('slotsDetail.fungame') }}
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, computed, ref, watch } from 'vue'
import { BaseCurrency, BaseIcon, BaseImage } from '@/components/base'
import { NPopover, NScrollbar, PopoverInst } from 'naive-ui'
import { useWalletStore, useAccountStore } from '@/store'
const emit = defineEmits(['enterGame', 'currencyChange'])
const show = ref(false)
// const currency = ref('')
const accountStore = useAccountStore()
const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	currency: {
		type: String
	}
})
const popoverRef = ref<PopoverInst | null>(null)
const walletStore = useWalletStore()
const getGameIamge = computed(() => {
	let img = props.data?.gameEntranceIcon.en_Us
	if (!img) {
		img = props.data?.gameIcon
	}
	return img
})
const handleGame = (funMode: boolean) => {
	emit('enterGame', funMode)
}
const handleCurrency = (item: any) => {
	//currency.value = item
	show.value = false
	emit('currencyChange', item)
	popoverRef.value?.setShow(false)
}
watch(
	() => walletStore.walletConfig.selectedCryptoCurrency,
	() => {}
)
// watch(
// 	() => props.currency,
// 	(cur) => {
// 		currency.value = cur as any
// 		//location.reload()
// 	}
// )

onMounted(() => {
	//currency.value = walletStore.walletConfig.selectedFiatCurrency
	//emit('currencyChange', currency.value)
})
</script>
